<template>
	<view class="container">
		<view class="header">
			<view class="search-bar">
				<text class="iconfont icon-search"></text>
				<input type="text" placeholder="搜索文章" placeholder-class="placeholder" v-model="searchText" />
			</view>
			<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
				<view class="category-tags">
					<text class="category-tag" 
						v-for="tag in categories" 
						:key="tag.id"
						:class="{ active: activeCategory === tag.id }"
						@click="setCategory(tag.id)">
						{{ tag.name }}
					</text>
				</view>
			</scroll-view>
		</view>
		
		<scroll-view scroll-y class="article-list">
			<view class="article-item" v-for="article in filteredArticles" :key="article.id" @click="readArticle(article.id)">
				<view class="article-main">
					<view class="article-content">
						<text class="article-title">{{ article.title }}</text>
						<text class="article-desc">{{ article.description }}</text>
						<view class="article-meta">
							<view class="author">
								<image :src="article.author.avatar" class="author-avatar" mode="aspectFill" />
								<text class="author-name">{{ article.author.name }}</text>
							</view>
							<view class="stats">
								<text class="views">{{ article.views }}阅读</text>
								<text class="likes">{{ article.likes }}赞</text>
							</view>
						</view>
					</view>
					<image v-if="article.cover" :src="article.cover" mode="aspectFill" class="article-cover" />
				</view>
				<view class="article-tags">
					<text class="tag" v-for="tag in article.tags" :key="tag">{{ tag }}</text>
				</view>
			</view>
		</scroll-view>
		
		<view class="write-btn" @click="writeArticle">
			<text class="iconfont icon-edit"></text>
			<text>写文章</text>
		</view>
	</view>
</template>

<script>
import { games } from '../../../utils/gameData.js';

export default {
	data() {
		return {
			searchText: '',
			activeCategory: 'all',
			categories: [
				{ id: 'all', name: '全部' },
				{ id: 'review', name: '游戏评测' },
				{ id: 'guide', name: '游戏攻略' },
				{ id: 'story', name: '游戏故事' },
				{ id: 'news', name: '游戏资讯' }
			],
			articles: []
		}
	},
	computed: {
		filteredArticles() {
			let filtered = this.articles;
			
			if (this.searchText) {
				const searchLower = this.searchText.toLowerCase();
				filtered = filtered.filter(article => 
					article.title.toLowerCase().includes(searchLower) ||
					article.description.toLowerCase().includes(searchLower)
				);
			}
			
			if (this.activeCategory !== 'all') {
				filtered = filtered.filter(article => article.categoryId === this.activeCategory);
			}
			
			return filtered;
		}
	},
	created() {
		this.generateMockData();
	},
	methods: {
		generateMockData() {
			// 生成10条模拟文章数据
			this.articles = Array(10).fill().map((_, index) => {
				const game = games[Math.floor(Math.random() * games.length)];
				const category = this.categories[Math.floor(Math.random() * this.categories.length)];
				
				return {
					id: `article_${index}`,
					title: this.getRandomTitle(),
					description: this.getRandomDescription(),
					cover: Math.random() > 0.3 ? game.game_banner : '',
					author: {
						name: this.getRandomName(),
						avatar: '/static/tiwen.gif'
					},
					views: Math.floor(Math.random() * 10000),
					likes: Math.floor(Math.random() * 1000),
					categoryId: category.id,
					tags: this.getRandomTags()
				};
			});
		},
		getRandomTitle() {
			const titles = [
				'深度解析：游戏设计的艺术',
				'独家评测：最新游戏体验',
				'回顾经典：游戏中的故事',
				'游戏攻略：隐藏要素大全',
				'游戏人物：角色背景故事'
			];
			return titles[Math.floor(Math.random() * titles.length)];
		},
		getRandomDescription() {
			const descriptions = [
				'本文将从游戏设计的角度深入分析这款游戏的创新之处...',
				'作为一款备受期待的新作，究竟能否达到玩家的期待？',
				'让我们一起重温这款经典游戏中的动人故事...',
				'收集了游戏中的各种隐藏要素，带你发现不一样的乐趣...',
				'深入挖掘游戏角色的背景故事，了解创作灵感...'
			];
			return descriptions[Math.floor(Math.random() * descriptions.length)];
		},
		getRandomName() {
			const names = ['游戏评论家', '专栏作家', '资深玩家', '游戏研究者', '内容创作者'];
			return names[Math.floor(Math.random() * names.length)];
		},
		getRandomTags() {
			const allTags = ['游戏设计', '游戏评测', '游戏故事', '游戏攻略', '游戏资讯', '游戏文化'];
			const count = Math.floor(Math.random() * 2) + 1;
			const tags = [];
			
			while (tags.length < count) {
				const tag = allTags[Math.floor(Math.random() * allTags.length)];
				if (!tags.includes(tag)) {
					tags.push(tag);
				}
			}
			
			return tags;
		},
		setCategory(categoryId) {
			this.activeCategory = categoryId;
		},
		readArticle(articleId) {
			uni.showToast({
				title: '查看文章详情',
				icon: 'none'
			});
		},
		writeArticle() {
			uni.navigateTo({
				url: '/pages/community/content/article-edit'
			});
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
	padding: 12px;
	padding-bottom: 80px;
}

.header {
	background: #2D2D44;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 15px;
}

.search-bar {
	display: flex;
	align-items: center;
	background: #1E1E2E;
	border-radius: 20px;
	padding: 8px 15px;
	margin-bottom: 12px;
}

.search-bar input {
	flex: 1;
	margin-left: 8px;
	color: #9796B8;
	font-size: 14px;
}

.placeholder {
	color: #6E6C89;
}

.category-scroll {
	white-space: nowrap;
}

.category-tags {
	display: inline-flex;
	gap: 10px;
	padding: 4px 0;
}

.category-tag {
	padding: 4px 12px;
	border-radius: 15px;
	font-size: 14px;
	color: #6E6C89;
	background: #1E1E2E;
	white-space: nowrap;
}

.category-tag.active {
	background: #9796B8;
	color: #1E1E2E;
}

.article-item {
	background: #2D2D44;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 12px;
}

.article-main {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

.article-content {
	flex: 1;
}

.article-title {
	font-size: 16px;
	color: #9796B8;
	margin-bottom: 8px;
	line-height: 1.4;
}

.article-desc {
	font-size: 14px;
	color: #6E6C89;
	margin-bottom: 12px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.article-cover {
	width: 120px;
	height: 80px;
	border-radius: 8px;
	flex-shrink: 0;
}

.article-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.author {
	display: flex;
	align-items: center;
	gap: 8px;
}

.author-avatar {
	width: 24px;
	height: 24px;
	border-radius: 12px;
}

.author-name {
	font-size: 14px;
	color: #6E6C89;
}

.stats {
	display: flex;
	gap: 12px;
	font-size: 12px;
	color: #6E6C89;
}

.article-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.tag {
	font-size: 12px;
	color: #6E6C89;
	background: rgba(110, 108, 137, 0.1);
	padding: 2px 8px;
	border-radius: 10px;
}

.write-btn {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #9796B8;
	color: #1E1E2E;
	padding: 10px 25px;
	border-radius: 25px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.iconfont {
	font-size: 16px;
	color: #6E6C89;
}

.write-btn .iconfont {
	color: #1E1E2E;
}
</style> 